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BACKGROUND 


background background-image 
background-position 
background-size 
background-repeat 
background-attachment 
background-origin 
background-clip 
background-color 


background-attachment scroll | fixed 


background-break bounding-box | each-box | 
continuous 


background-clip length 
% 
border-box | padding-box | 
content-box | no-clip 


background-color color 
transparent 
background-image url 
none 
background-origin border-box | padding-box | 
content-box 


background-position top left | top center | top 
right | center left | center 
center | center right | 
bottom left | bottom center 
| bottom right 
x-% y-% 
X-pos y-pos 


background-repeat repeat | repeat-x | repeat- 
y | no-repeat 


background-size length 
% 
auto | cover | contain 


BORDER 


border-width 
border-style 
border-color 


border-break border-width 
border-style 
color 
close 


border-bottom border-bottom-width 
border-style 
border-color 


border-style 


border-bottom-width thin | medium | thick 
length 


border-collapse collapse | separate 
border-color color 


border-image image 

[ number / % 
border-width 

stretch | repeat | round ] 
none 


border-bottom-color 


border-bottom-style 


border-left border-left-width 
border-style 
border-color 


border-style 


thin | medium | thick 
length 


border-right border-right-width 
border-style 
border-color 


border-style 


border-right-width thin | medium | thick 
length 


border-left-color 
border-left-style 


border-left-width 


border-right-color 


border-right-style 
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border-top border-top-width 
border-style 
border-color 

border-top-style border-style 


border-top-width thin | medium | thick 
length 

border-width thin | medium | thick 
length 


border-radius border-top-right-radius 
border-bottom-right-radius 
border-bottom-left-radius 
border-top-left-radius 


border-top-right-radius 
border-bottom-right-radius 
border-bottom-left-radius 
border-top-left-radius 


box-shadow inset || [ length, length, 
length, length || <color> ] 
none 

border-style none | hidden | dotted | 
dashed | solid | double | 
groove | ridge | inset | 
outset 


font font-style 

font-variant 
font-weight 
font-size/line-height 
font-family 

caption | icon | menu | 
message-box | small- 
caption | status-bar 


family-name 
generic-family 
inherit 


font-size xx-small | x-small | small | 
medium | large | x-large | 
xx-large | smaller | larger | 
inherit 
length 
% 


font-size-adjust none| inherit 
number 


font-stretch normal | wider | narrower | 
ultra-condensed | extra- 
condensed | condensed | 
semi-condensed | semi- 
expanded | expanded | 
extra-expanded | ultra- 
expanded | inherit 


font-style normal | italic | oblique | 
inherit 


font-weight normal | bold | bolder | 
lighter | 100 | 200 | 300 | 
400 | 500 | 600 | 700 | 800 
| 900 | inherit 


BOX MODEL 


left | right | both | none 


none | inline | block | inline- 
block | list-item | run-in | 
compact | table | inline- 
table | table-row-group | 
table-header-group | table- 
footer-group | table-row | 
table-column-group | table- 
column | table-cell | table- 
caption | ruby | ruby-base | 
ruby-text | ruby-base-group 
| ruby-text-group 
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BOX MODEL 


left | right | none 


none | inherit 
length 


none | inherit 
length 


margin-top 
margin-right 
margin-bottom 
margin-left 


padding-top 
padding-right 
padding-bottom 
padding-left 


visible | hidden | scroll | 
auto | no-display | no- 

conten 
overflow-x 
overflow-y 


auto | marquee-line | mar- 
quee-block 


visible | hidden | scroll | 
auto | no-display | no- 
content 


visible | hidden | scroll | 
auto | no-display | no- 
content 
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TEXT 
Itr | rtl | inherit 


none | [ start | end | end- 
edge J 


none | 
cent] 


hanging-punctuation 


letter-spacing 


punctuation-trim start | end | adja- 


start | end | left | right | 
center | justify 


text-align-last start | end | left | right | 


center | justify 


text-decoration none | underline | overline | 


line-through | blink 


text-emphasis none | [ [ accent | dot | circle 


| disc] [ before | after ]? ] 


length 
% 


auto | inter-word | inter- 
ideograph | inter-cluster | 
distribute | kashida | tibetan 


text-outline 
text-shadow 


text-transform 


none | capitalize | uppercase 
| lowercase 

normal | unrestricted | none 
| suppress 

normal | embed | bidi- 
override 

normal | pre | nowrap | pre- 
wrap | pre-line 

preserve | collapse | pre- 
serve-breaks | discard 
normal | keep-all | loose | 
break-strict | break-all 


normal 
length 


% 
word-wrap normal | break-word 
COLUMN 


auto 
number 
auto | balance 


normal 
length 


column-rule-width 
column-rule-style 
column-rule-color 


border-style 


thin | medium | thick 

length 

column-width 

column-count 

1 | all 

auto 

length 
COLOR 

inherit 

color 

inherit 

number 
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unicode-bidi 


white-space 


white-space-collapse 


word-break 


word-spacing 


column-gap 


column-rule-color 
column-rule-style 


column-rule-width 
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TEMPLATE LAYOUT 


cicadas 


box-flex-group i. 


box-orient horizontal | vertical | inline- 
axis | block-axis 


content-box | padding-box | 
border-box | margin-box 


tab-side top | bottom | left | right 


TABLE 


s/s 
a 7c 
® 13 
Qis 
O 
x x 


cue-before uri [ silent | x-soft | soft | 


medium | loud | x-loud] | 
none | inherit ] 

number 

% 


uri [ silent | x-soft | soft | 
medium | loud | x-loud] | 
none | inherit ] 

number 


mark-before 
mark-after 


mark-before string 


string 


pause-before 
pause-after 


pause-before none | x-weak | weak | 
medium | strong | x-strong 
| inherit 
time 


pause-after none | x-weak | weak | 
medium | strong | x-strong 
| inherit 
time 


rest-before 
rest-after 
rest-before x-weak | weak | 
ium | strong | x-strong 
inherit 
x-weak | weak | 
ium | strong | x-strong 
inherit 


normal | spell-out | 
digits | literal-punctuation | 
no-punctuation | inherit 


voice-balance left | center | right | left- 
wards | rightwards | inherit 
number 


voice-duration 
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voice-family inherit | [ <specific-voice, 
age, generic-voice, num- 


ber> ] 


voice-rate x-slow | slow | medium | 
fast | x-fast | inherit 
% 


voice-pitch x-low | low | medium | high 
| x-high | inherit 
number 
% 


voice-pitch-range x-low | low | medium | high 


| x-high | inherit 
number 


voice-stress strong | moderate | none | 
reduced | inherit 


voice-volume silent | x-soft | soft | me- 
dium | loud | x-loud | inherit 
number 
% 


LIST & MARKERS 
list-style-type 
list-style-position 
list-style-image 


list-style-image none 
url 
Inside | outside 


none | asterisks | box | 
check | circle | diamond | 
disc | hyphen | square | 
decimal | decimal-leading- 
zero | lower-roman | upper- 
roman | lower-alpha | up- 
per-alpha | lower-greek | 
lower-latin | upper-latin | 
hebrew | armenian | geor- 
gian | cjk-ideographic | 
hiragana | katakana | hira- 
gana-iroha | katakana-iroha 
| footnotes 


marker-offset auto 
length 


animation-name 
animation-duration 
animation-timing-function 
animation-delay 
animation-iteration-count 
animation-direction 


animation-iteration-count | inherit 
number 
animation-play-state running | paused 


animation-timing-function | ease | linear | ease-in | 
ease-out | ease-in-out | 
cubic-Bezier (number, num- 
ber, number, number) 


TRANSITIONS 


transition-property 
transition-duration 
transition-timing-function 
transition-delay 


transition-timing-function | ease | linear | ease-in | 
ease-out | ease-in-out | 
cubic-Bezier (number, num- 
ber, number, number) 


list-style-position 


list-style-type 
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GRID POSITIONING GENERATED CONTENT 


grid-columns none | inherit hyphenate-after 
[ length percentage relative 
length ] 


hyphenate-before 
none | inherit 
[ length percentage relative 
length ] hyphenate-character 


OUTLINE - — 

i Re pRemate aes no-limit line-stacking-strategy inline-line-height | block- 
pee ee line-height | max-height | 
outline-style aire 
seer es Sa hyphenate-resource none grid-height 

uri 
outline-color color 
invert hyphens 
outline-offset inherit image-resolution normal | auto 
length dpi 


outline-style None | dotted | dashed | [ crop || cross ] | none 
solid | double | groove | 
ridge | inset | outset 
outline-width thin | medium | thick = 
ei length = = 


3D / 2D TRANSFORM 
backface-visibility visible | hidden 


perspective none 
number 
text-replace 


perspective-origin [[[ percentage> | eet root | parent | new 
</length> | left | center | pres 
right ] [ <percentage> | LINE BOX g 


<length> | top | center | z = A window | tab | none 
bottom ]? ] <length> ] | alignment-adjust auto | baseline | before- 


[ [I left | center | right J || edge | text-before-edge | above | behind | front | 
[ top | center | bottom J ] middle | central | after-edge back 

<length> ] | text-after-edge | ideo- 

graphic | alphabetic | hang- 

none | matrix | matrix3d | ing | mathematical 

translate3d | translateX | length 

translateY | translateZ | % 

scale | scale3d | scaleX | - : - - 

scaleY | scaleZ | rotate | alignment-baseline baseline | use-script | be- 

rotate3d | rotateX | rotateY fore-edge | text-before- 


| rotateZ | skewX | skewY | edge | after-edge | text- 
skew | perspective after-edge | central | middle 


| ideographic | alphabetic | 
transform-origin [ [ [ <percentage> | hanging | mathematical 
</length> | left | center | 3 7 x 
right ] [ <percentage> | baseline-shift baseline | sub | super 
<length> | top | center | length 
bottom ]? ] <length> ] | % 
[[ [\eft | center | right 7 || 


auto line-height normal 
integer number 


length 
auto % 


integer 

line-stacking line-stacking-strategy 
line-stacking-ruby 
line-stacking-shift 


auto 
string 


none | manual | auto 


vertical-align Baseline | sub | super | top 
| text-top | middle | bottom 
| text-bottom 


start | first | last length 
% 


normal | here 
identifier 


none 
string string string string HYPERLINK 


identifier target-name 
content-list target-new i 
target-position 
none 

[<string> <string>]+ 


dominant-baseline auto | use-script | no- 
[ top | center | bottom J 7 change | reset-size | alpha- 


<length> J betic | hanging | ideo- 


transform-style flat | preserve-3d graphic | mathematical | 
central | middle | text-after- 
GENERATED CONTENT edge | text-before-edge 


bookmark-label content drop-initial-after-align alignment-baseline aito 
see drop-initial-after-adjust | central | middle | after-edge number 


| text-after-edge | ideo- 


A A RUBY 
bookmark-level none graphic | alphabetic | U 
integer mathematical auto | start | left | center | 


length end | right | distribute-letter 
bookmark-target | distribute-space | line- 


% 
drop-initial-before-align caps-height edge 
borderdenath aa alignment-baseline ruby-overhang auto | start | end | none 
length 


drop-initial-before-adjust | before-edge | text-before- ruby-position before | after | right | inline 
edge | central | middle | 


normal | none | inhibit hanging | mathematical fruby-span o | attr(x) | none 
uri length 
p % 
counter-increment none 
identifier number drop-initial-value initial 
integer 
counter-reset none 
identifier number drop-initial-size auto 
integer 
auto % 
shape line 


float-offset length length integer 
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PAGED MEDIA 


fill | hidden | meet | slice 


fit-position [top | center | bottom] || 
[left | center | right] 
length 
% 


auto 
angle 


image-orientation 


integer 


auto 
identifier 


page 


page-break-after auto | always | avoid | left | 


right 
page-break-before auto | always | avoid | left | 
right 

page-break-inside auto | avoid 

auto | landscape | portrait 
length 


integer 


appearance normal | inherit | [icon | 
window | desktop | work- 
space | document | tooltip | 
dialog | button | push- 
button | hyperlink | radio- 
button | checkbox | menu- 
item | tab | menu | 
menubar | pull-down-menu 
| pop-up-menu | list-menu | 
radio-group | checkbox- 
group | outline-tree | range 
| field | combo-box | signa- 
ture | password] 


auto | crosshair | default | 
pointer | move | e-resize | 
ne-resize | nw-resize | n- 
resize | se-resize | sw-resize 
| s-resize | w-resize | text | 
wait | help 


url 
auto | inherit 
url 


auto | inherit 
number 


auto | inherit 
<id> [ current 
<target-name> 


auto | inherit 
<id> [ current 
<target-name> 


auto | inherit 
<id> [ current 
<target-name> 


auto | inherit 
<id> [ current | root 
<target-name> ] 


none | both | horizontal | 
vertical | inherit 
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@ Values in italics are place holders for an actual value (like 1px, 


1em, 1%), values in normal text are values that can be used as 
the actual value 


CSS Properties in Dark Red are shorthand properties and each 
value must be defined. The exception is where the property can 
define from one to four of the sides of a box element property 
(Top-Right-Bottom-Left) - i.e. border-width 
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PSEUDO-CLASS 


an activated element 


an element while the 
element has focus 


a visited link 


an element when you mouse 
over it 


an unvisited link 


o 
1 | 


disabled an element while the 


element is disabled 


inth-child(n) 


an element while the 
element is enabled 


an element (form element 
control) that is checked 


an element that is currently 
selected of highlighted by 
the user 


Allows the author to specify 
a language to use ina 
specified element 


an element that is the n-th 
sibling 
inth-last-child(n) an element that is the n-th 
sibling counting from the 
last sibling 


an element that is the first 
sibling 
an element that is the last 
sibling 


ane 
child 


ement that is the only 


an element that is the n-th 
sibling of its type. 


inth-of-type(n) 


an element that is the n-th 
sibling of its type counting 
from the last sibling 


inth-last-of-type(n) 


an element that is the first 
sibling of its type 


:last-of-type 


:first-of-type 
:only-of-type 


PSEUDO-ELEMENT 

Adds special style to the first 
letter of a text 
Adds special style to the first 
line of a text 

::before Inserts some content before 
an element 
Inserts some content after an 
element 


an element that is the last 
sibling of its type 


an e 
child 


ement that is the only 
of that type 


an element that has no 
children 


root element within the 
document 


an element not represented 
by the argument ‘x’ 


a target element as specified 
by a target in a URI 
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ABSOLUTE MEASUREMENT 
percentage 
centimeter 
inch 
millimeter 
pica (1p = 12 points) 


point (1pt = 1/72 inch) 


RELATIVE MEASUREMENT 


width of the "0" glyph found in 
the font for the font size used to 
render 


łem = current font size of 
current element 


x-height of the element's font 
the grid defined by 'layout-grid' 
pixel of the viewing device 

the font size of the root element 
the viewport's height 

the viewport's width 


viewport's height or width, 
whichever is smaller of the two 


degrees 
grads 
radians 


turns 


TIME 
milli-seconds 


seconds 


FREQUENCY 
hertz 


kilo-hertz 


color name red, blue, green, dark green 


red = 


rgb(x,y,z) rgb(255,0,0) 


rgb(x%,y%,z%) red = rgb(100%,0,0) 


rgba(x,y,z, alpha) red = rgba(255,0,0) 


#rrggbb red = #ff0000 (or shorthand = 


#f00) 


hsI(hue, saturation, 
lightness) 


red = hsl(0, 100%, 50%) 


hsla(hue, saturation, 
lightness, alpha) 


red = hsl(0, 100%, 50%) 


An accent color (typically chosen 
by the user) to customize the 
user interface of the user agent 
itsel 


computed value of the 
‘currentColor' keyword is the 
computed value of the 'color' 
property 
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Universal | Any element * { font: 10px Arial; } 
; 


Type Any element of | hi { text-decoration 
that type underline; } 


Multiple hi, h2, h3 { font-family: 
ements of Verdana; } 
ifferent types 
Multiple .sampleclass { text- 
ements of decoration: underline; } 
ifferent types 
when you don’t 
want to affect 
all instances of 
that type 


A single 

ement type 
when you don’t 
want to affect 
all instances of 
that type 


#sampleid { text- 
decoration: underline; } 


Descendant | An element that | #gallery hi { text- 
is below (in the | decoration: underline; } 
document tree) 
another 
element—no 
matter how 
many levels 
below 


An element that | #title > p { font-weight: 
is directly below | bold; } 

(in the 

document tree) 

another 

element 


All elements 
that share the 
same parent 
and elements 
are in the same 
immediate 
sequence 


Adjacent 
Sibling 


hi + p { font-style: 
italic; } 


All elements 
that share the 
same parent 
and elements 
are in the same 
sequence (not 
necessarily 
immediate) 


General 
Sibling 


hi ~ p { font-style: 
italic; } 


An element with | E[selected] - att whatever 
that matches the value 
the attribute E[att="val"] - att with a 
listed specific value 
E[rel~="next"] - att with 
a value is a whitespace 
separated list 
*[lang|="en"] - att value 
either being exactly "val" 
or beginning with "val" 
immediately followed by 
E[att*="val"] - att value 
that begins with the prefix 
"val" 
E[att$="val"] - att value 
that end with the suffix 


att*="val"] - att value 
contains at least one 
instance of the substring 
"yal" 
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